<template>
	<view class="brand-showcase">
		<view class="brand-grid">
			<view
				class="brand-item"
				v-for="(brand, index) in brandsWithInfo"
				:key="brand.id"
				@tap="onBrandTap(brand)"
			>
				<view class="brand-card">
					<view class="brand-header">
						<view class="brand-logo">
							<image
								:src="brand.url || brand.logoUrl || '/static/empty/no.jpg'"
								class="logo-image"
								mode="aspectFit"
							/>
						</view>
						<view class="brand-tag" v-if="index < 3">
							<text class="tag-text">热门</text>
						</view>
					</view>
					<view class="brand-info">
						<text class="brand-name">{{ brand.name }}</text>
						<text class="brand-desc">{{
							brand.description || getDefaultDescription(brand)
						}}</text>
						<view class="brand-stats">
							<text class="product-count">{{ brand.productCount || 0 }}款商品</text>
							<cl-icon name="arrow-right" size="14" color="#999"></cl-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { useCool } from "/@/cool";

const props = defineProps<{
	brands: any[];
}>();

const { router } = useCool();

// 为品牌添加额外信息
const brandsWithInfo = computed(() => {
	return props.brands.map((brand, index) => ({
		...brand,
		// 模拟数据，实际应从后端获取
		productCount: brand.productCount || Math.floor(Math.random() * 500) + 100,
		description: brand.description || null,
	}));
});

// 获取默认描述
function getDefaultDescription(brand: any): string {
	const descriptions = [
		"专业医药品牌",
		"品质保证 值得信赖",
		"知名制药企业",
		"创新医药科技",
		"健康守护专家",
	];
	// 基于品牌ID生成固定的描述索引
	const index = (brand.id || 0) % descriptions.length;
	return descriptions[index];
}

function onBrandTap(brand: any) {
	console.log(brand);
	router.push(`/pages/goods/list?brandId=${brand.brandID}`);
}
</script>

<style lang="scss" scoped>
.brand-showcase {
	padding: 0 16rpx;
}

.brand-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
}

.brand-item {
	background-color: #ffffff;
	border-radius: 20rpx;
	overflow: hidden;
	transition: all 0.3s ease;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

	&:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	}
}

.brand-card {
	display: flex;
	flex-direction: column;
	height: 280rpx;
}

.brand-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 140rpx;
	background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
	padding: 20rpx;
}

.brand-logo {
	width: 100rpx;
	height: 100rpx;
	padding: 16rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo-image {
	width: 100%;
	height: 100%;
}

.brand-tag {
	position: absolute;
	top: 12rpx;
	right: 12rpx;
	background: linear-gradient(135deg, #ff4757 0%, #ff6b7a 100%);
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.tag-text {
	font-size: 20rpx;
	color: #ffffff;
	font-weight: 600;
}

.brand-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 16rpx;
}

.brand-name {
	font-size: 28rpx;
	color: #1a1a1a;
	font-weight: 600;
	margin-bottom: 8rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.brand-desc {
	font-size: 22rpx;
	color: #999;
	margin-bottom: 12rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.brand-stats {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
}

.product-count {
	font-size: 24rpx;
	color: #667eea;
	font-weight: 500;
}
</style>
